<template>
	<view>
		<view class="flex-ju-b color666 border-bECEDEE ">
			<view @click="tapci(0)" class="flex-ju-c flex1 pb10" :class="{active:tindex==0}">单词</view>
			<view @click="tapci(1)" class="flex-ju-c flex1 pb10" :class="{active:tindex==1}">词根</view>
		</view>
		<view class="con">
			<view class="flex-ju-b mt30">
				<view @click="tapsrot(f)" class="size24 bgf9f9f9 wh128-46 ra46 flex-ju-c" :class="{ctive:cindex==f}" v-for="(item,f) in ['字母顺序','字母逆序','时间顺序','时间逆序','随机排序']" :key="f">{{item}}</view>
			</view> 
		</view>
		<view class="">
			<view class="flex-a-i ml30">
				<scroll-view @scroll="viewscroll" scroll-y style="overflow-y: hidden;" class="hrig" :scroll-into-view="scrollview" scroll-with-animation>
					<nodata v-if="isdata"></nodata>
					<template v-if="type==2">
					<view :id="'section'+item.entry[0].toUpperCase()" v-for="(item,index) in list" :key="index"   class="border-bECEDEE pb30 mt30">
							<view class="flex-ju-b mb20">
								<view @click="navto('/pages/index/root_detail?id='+item.entryId)" class="ra32 bold flex1">{{item.entry}}</view>
								<view>
									<view class="flex-a-i">
										<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
											<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
										</view>
										<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
											<image mode="widthFix" src="/static/zhan.png" class="image width28"></image>
										</view>
									</view>
								</view>
							</view>
							<uni-collapse ref="collapse" @change="change($event,item)">
								<uni-collapse-item  title-border="none">
									<template v-slot:title>
										<view class="flex-ju-b color666">
											<view class=" size24 one flex1">{{item.definition}}</view>
											<view class="flex-a-i size22">
												{{item.zhan?'收起':'展开'}}
											</view>
										</view>
									</template>
									<view class="content">
										<view class="flex-a-i flex-wrap size24">
											<view v-for="(items,s) in item.words" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
					</view>
					</template>
					<template v-else>
					<view :id="'section'+item.entry[0].toUpperCase()" v-for="(item,index) in list" :key="index" class="border-bECEDEE pb30 mt30">
							<view class="flex-ju-b mb20" >
								<view  @click="navto('/pages/index/words_detail?id='+item.entryId)" class="ra32 bold flex1">{{item.entry}}</view>
								<view>
									<view class="flex-a-i">
										<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
											<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
										</view>
										<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
											<image mode="widthFix" src="/static/zhan.png" class="image width28"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="color666 size24 one flex1">{{item.definition}}</view>
						</view>
					</template>
					
				</scroll-view>
				
				<view class="size22 color666">
					<view @click="tapzimu(item)" class="wh60-35 flex-ju-c" v-for="(item,p) in zimu" :key="p">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isdata:false,
				list:[],
				type:1,
				tindex:0,
				cindex:0,
				scrollview:"",
				zimu:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','S','Y','Z'],
				isall:false,
				sort:1,
				containerHeight:610,
				sectionPositions:[]
			}
		},
		onLoad() {
			this.getlist(1)
		},
		mounted() {
			 
		},
		methods: {
			findCurrentSection(scrollTop, containerHeight) {
			            const viewportTop = scrollTop;
			            const viewportBottom = scrollTop + containerHeight;
			            const viewportCenter = scrollTop + containerHeight / 2;
			            
			            // 查找最接近视口中心的区块
			            let closestSection = null;
			            let minDistance = Infinity;
			            
			            this.list.forEach(section => {
			                const sectionCenter = section.top + section.height / 2;
			                const distance = Math.abs(sectionCenter - viewportCenter);
			                
			                if (distance < minDistance) {
			                    minDistance = distance;
			                    closestSection = section;
			                }
			            });
			            
			            return closestSection;
			        },
			viewscroll(event){
				 const scrollTop = event.detail.scrollTop;
				            const containerHeight = this.containerHeight;
				            
				            // 计算当前可视区域对应的区块
				            const currentSection = this.findCurrentSection(scrollTop, containerHeight);
				            if (currentSection) {
				                const sectionIndex = parseInt(currentSection.id.split('-')[1]);
				                this.currentNavIndex = sectionIndex;
				                console.log('当前区块ID:', currentSection.id);
				            }
			},
			tapzimu(item){
				this.scrollview ='section'+item
			},
			tapopen(item,index){
				this.http('/api/userReview?entryId='+item.entryId+'&reviewType='+ (+this.tindex+1),{},'delete').then(res=>{
					this.toast('已取消')
					this.list.splice(index,1)
					this.nodata(this.list,this)
				})
			},
			change(e,item){
				if(e.length){
					item.zhan = 1
				}else{
					item.zhan = 0
				}
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			getlist(reviewType){
				this.http('/api/userReview',{
					reviewType:this.tindex+1,
					sort:this.sort
				}).then(res=>{
					this.list = res.data
					this.nodata(this.list,this)
					
					  setTimeout(() => {
						  const query = uni.createSelectorQuery().in(this);
						  					   this.sectionPositions = [];
						  					this.list.forEach((section, index) => {
						  					   query.select('#section-' + index).boundingClientRect();
						  });
						   query.exec((res) => {
						  						console.log(res)
						                  res.forEach((rect, index) => {
						                      if (rect) {
						                          this.sectionPositions.push({
						                              id: 'section-' + index,
						                              top: rect.top,
						                              bottom: rect.bottom,
						                              height: rect.height
						                          });
						                      }
						                  });
						                  console.log('区块位置计算完成:', this.sectionPositions);
						              });
					  },1000)
					 
				   
				   
				})
			},
			tapsrot(index){
				this.cindex =index
				this.sort = index+1
				this.getlist()
			},
			tapci(index){
				this.tindex = index
				this.type=index+1
				this.getlist()
			},
			
		}
	}
</script>

<style>
	.ctive{
		color: #FD2F55;
		background: rgba(255,46,83,0.1);
	}
	.active{
		border-bottom: 1px solid #FD2F55;
		color:#000;
		font-weight: 500;
	}
	.mkds{
		width: 100vw;
		height: 100vh;
		z-index: 5;
	}
	.hrig{
		height:calc(100vh - 121px)
	}
</style>
